<template>
  <!-- 变速箱油选规格 -->
  <div class="hr-specificationPop" style="z-index:110" @click.stop="on_colse_click">
    <div class="hr-specificationPopBox">
      <div class="hr-specificationTitle">
        <div class="hr-specificationTitle_p">请选择变速箱规格</div>
        <span class="hr-specificationTitle_a" @click.stop="on_colse_click"></span>
      </div>
      <div class="hr-specificationMain">
        <div class="hr-specificationMain_ul">
          <div class="hr-specificationMain_li" v-for="(item, index) in transParamList" :key="index">
            <div class="hr-specificationMain_p">{{ item.ParamValue }}</div>
            <span v-if="item.ArticleId > 0" @click.stop="on_select_click(item)" class="hr-specificationMain_a">查 看</span>
            <span class="hr-specificationMain_span" v-if="item.ArticleId == 0">内容完善中…</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: '',
  props: {
    transParamList: {
      type: Array,
      value: []
    }
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters([
      "cangpei_param_gcd",
      "cangpei_param_ccd",
      "cangpei_param_ucd",
    ])
  },
  methods: {
    on_colse_click() {
      this.$emit('close', '');
    },
    on_select_click(item) {
      var userParams = [
        { pTypeId: item.ParamTypeId, pValueId: item.ParamValueId }
      ];
      var p = encodeURI(JSON.stringify(userParams));
      var v = _this.vin ? _this.vin : "";
      var s = _this.subid ? _this.subid : "";

      this.$emit('close', '');

      this.$router.push({
        path: `/TransmissionOil`,
        query: {
          skip: 1,
          vin: this.param_vin,
          subid: s,
          tid: item.ArticleId,
          p: p,
        },
      });
    }
  }
}
</script>

<style scpoed>
/*选变速箱规格*/
.hr-specificationPop {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.48);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
}
.hr-specificationPopBox {
  width: 84%;
  height: auto;
  background: #fff;
  border-radius: 0.24rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.hr-specificationTitle {
  width: 100%;
  height: 1.36rem;
  background: #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hr-specificationTitle .hr-specificationTitle_p {
  font-size: 0.48rem;
  line-height: 0.8rem;
  text-align: center;
  color: #8e8e8e;
}
.hr-specificationTitle .hr-specificationTitle_a {
  width: 1.36rem;
  height: 1.36rem;
  background-image: url("https://c1.zhipeicloud.com/cangpei_mini/images/button_close1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.32rem;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}
.hr-specificationMain {
  width: 7.6rem;
  height: auto;
  margin-top: -0.013333333333333334rem;
}
.hr-specificationMain .hr-specificationMain_ul {
  width: 100%;
  float: left;
  clear: left;
}
.hr-specificationMain .hr-specificationMain_li {
  width: 100%;
  padding: 0.32rem 0;
  border-top: 0.013333333333333334rem solid #d8d8d8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  float: left;
  clear: left;
}
.hr-specificationMain .hr-specificationMain_p {
  width: 100%;
  height: auto;
  min-height: 0.72rem;
  font-size: 0.36rem;
  line-height: 0.64rem;
  text-align: left;
  color: #282828;
}
.hr-specificationMain .hr-specificationMain_a {
  width: 1.76rem;
  height: 0.72rem;
  border-radius: 0.36rem;
  border: 1px solid #357ce8;
  font-size: 0.32rem;
  line-height: 0.64rem;
  text-align: center;
  color: #357ce8;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hr-specificationMain .hr-specificationMain_span {
  width: 1.92rem;
  height: 0.72rem;
  font-size: 0.32rem;
  line-height: 0.64rem;
  text-align: center;
  color: #f39c13;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
